<template>

  <p>文章列表总数：{{ articleList.length }}</p>
  <button @click="addArticle">添加文章</button>
  <div v-for="(article,index) in articleList">
    <p class="defaultClass" :class="(index+1) % 2 === 0? 'evenClass' : 'oddClass'">序号：{{ index + 1 }}</p>
  </div>

</template>

<script setup>

import {ref} from "vue";

const articleList = ref([{
      title: "一小时构建Vue知识体系-default",
      summary: "关注方才兄，一小时构建Vue知识体系-default",
      author: "方才",
      imgUrl: "https://fangcaicoding.cn/oss/cover/css_learn.png",
      readCt: 12
    }
    ]
)

const addArticle = () => {
  articleList.value.push({
    title: "一小时构建Vue知识体系-" + Math.floor(Math.random() * 100),
    summary: "关注方才兄，一小时构建Vue知识体系-3",
    author: "方才3",
    readCt: Math.floor(Math.random() * 100)
  })
}


</script>


<style scoped>
.defaultClass {
  font-size: 16px;
  color: black;
}

/* 偶数的样式 */
.evenClass {
  color: red;
}

/* 奇数的样式 */
.oddClass {
  color: green;
}
</style>